<nz-spin [nzSpinning]="isSpinning">
    <div style="color: red;height: auto;margin-left: 25%;width: 50%;">甲方如果没有搜索到说明：贵单位未在项目所在地特种设备安全监管部门备案，请完成备案后进行合同管理！</div>
    <div>
    <form nz-form [formGroup]="validateForm">
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
              <label nz-form-item-required>甲方名称</label>
            </div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('firstParty')">
              <nz-select style="width: 320px;" nzAllowClear [nzPlaceHolder]="'请输入甲方名称'" [(ngModel)] ="contractBean.firstParty"
                         nzShowSearch formControlName="firstParty" name="firstParty" nzDisabled="{{firstDisable}}">
                <nz-option [nzLabel]="contractBean.firstPartyName" [nzValue]="contractBean.firstParty"></nz-option>
                <nz-option *ngFor="let option of firstList" [nzLabel]="option.partyName" [nzValue]="option.id" [nzDisabled]="option.disabled">
                </nz-option>
              </nz-select>
              <div nz-form-explain *ngIf="getFormControl('firstParty').dirty&&getFormControl('firstParty').hasError('required')">甲方名称不能为空!</div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
              <label nz-form-item-required>乙方名称</label>
            </div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('secondParty')">
              <nz-select style="width: 320px;" nzAllowClear [nzPlaceHolder]="'请输入已方名称'"
                         nzShowSearch formControlName="secondParty" name="secondParty" [(ngModel)] ="contractBean.secondParty" nzDisabled="{{secondDisable}}">
                <nz-option [nzLabel]="contractBean.secondPartyName" [nzValue]="contractBean.secondParty"></nz-option>
                <nz-option *ngFor="let option of secondList" [nzLabel]="option.partyName" [nzValue]="option.id" [nzDisabled]="option.disabled">
                </nz-option>
              </nz-select>
              <div nz-form-explain *ngIf="getFormControl('secondParty').dirty&&getFormControl('secondParty').hasError('required')">乙方名称不能为空!</div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
              <label nz-form-item-required>合同类型</label>
            </div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('contractType')">
              <!--<nz-input formControlName="contractType" [nzId]="'contractType'" [(ngModel)]="contractBean.contractType" name="contractType"
                [nzPlaceHolder]="'请输入合同类型'"></nz-input>-->

              <nz-select style="width: 320px;" nzAllowClear formControlName="contractType" [nzPlaceHolder]="'请选择'" [(ngModel)]="contractBean.contractType"
                         [nzShowSearch]="true" name="contractType">


                <nz-option [nzLabel]="'维保委托合同'" [nzValue]="'维保委托合同'" [nzDisabled]="false">
                </nz-option>
                <nz-option [nzLabel]="'检验委托合同'" [nzValue]="'检验委托合同'" [nzDisabled]="false">
                </nz-option>
                <nz-option [nzLabel]="'电梯责任险合同'" [nzValue]="'电梯责任险合同'" [nzDisabled]="false">
                </nz-option>
                <nz-option [nzLabel]="'其他'" [nzValue]="'其他'" [nzDisabled]="false">
                </nz-option>
              </nz-select>


              <div nz-form-explain *ngIf="getFormControl('contractType').dirty&&getFormControl('contractType').hasError('required')">合同类型不能为空!</div>
            </div>
          </div>

          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="14">
              <label>附件</label>
            </div>
            <div >
              <!--<nz-upload nzAction="{{config.IP+config.API.upload}}" nzListType="picture-card" [(nzFileList)]="fileList"
                         [nzPreview]="handlePreview" [nzRemove]="nzRemoveFile" (nzChange)="handleChange($event)">
                <i class="anticon anticon-plus"></i>
                <div class="ant-upload-text">上传</div>
              </nz-upload>-->

              <nz-upload nzAction="{{config.IP+config.API.upload}}" [(nzFileList)]="fileList" [nzShowButton]="true" [nzRemove]="nzRemoveFile" [nzPreview]="handlePreview" (nzChange)="handleChange($event)">
                <button nz-button>
                  <i class="anticon anticon-upload"></i><span>上传</span>
                </button>
              </nz-upload>

              <!-- 图片预览模态框 -->
              <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
                <ng-template #modalContent>
                  <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
                </ng-template>
              </nz-modal>
            </div>
          </div>

          <div nz-form-item nz-row style="margin-bottom:8px;">
                  <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="10">
                      <button nz-button [nzSize]="'large'" [nzType]="'primary'" (click)="submitForm()">修改 | 保存</button>
                  </div>
          </div>

        </form>
      </div>
      </nz-spin>
